<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>分销海报</title>
    <link rel="stylesheet" href="__INDEX__/css/swiper.min.css" />
    <link rel="stylesheet" href="__INDEX__/css/index1.css" />
    <script type="text/javascript" src="__INDEX__/js/rem1.js" ></script>
    <script type="text/javascript" src="__INDEX__/js/jquery-3.3.1.js" ></script>
    <script type="text/javascript" src="__INDEX__/js/swiper.min.js" ></script>
</head>

<body id="caId">
<div class="swiper_box"
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="kv_box" id="qrImCr" style="letter-spacing:2px;">
                    <img id="qrimg" style="display: none" src="" alt="" width="100%">
                    <img class="kv_img" src="__INDEX__/images/kv.jpg" />
                    <div class="kv_con">
                        <img src="<?php echo $userData['qrcode'] ?>" />
                        <p>
                            <?php
                            echo  $userData['name'];
                            ?>
                        </p>
                        <p>邀请您加入新绿人才</p>
                    </div>
                    <div class="kv_ps"><span>长按识别扫描二维码进入</span></div>
                </div>
            </div>
        </div>
    </div>

<!--    <div class="shangchuan_btn save_btn">-->
<!--    <a onclick="getQrImg()">保存海报</a>-->
</div>
</div>
</body>
</html>
<script src="__INDEX__/js/html2canvas.js" type="text/javascript" charset="utf-8"></script>
<script>
    function getQrImg(){
        var map = document.getElementById("qrImCr")
        html2canvas(map).then(function (canvas) {
            //将canvas转化成base64图片
            var tempSrc = canvas.toDataURL("image/png");
            //将base64传给img标签
            $('#qrimg').css('display','block').attr('src',tempSrc);
            //删除Dom节点
            $('.kv_img').css('display','none');
            $('.kv_con').css('display','none');
            $('.kv_ps').css('display','none');
        });
    }
    // 函数名longpress，参数为: 需长按元素的id、长按之后的逻辑函数func
    function longpress(id, func) {
        var timeOutEvent;
        document.querySelector('#' + id).addEventListener('touchstart', function (e) {
            // 开启定时器前先清除定时器，防止重复触发
            clearTimeout(timeOutEvent);
            // 开启延时定时器
            timeOutEvent = setTimeout(function () {
                // 调用长按之后的逻辑函数func
                func();
            }, 300);  // 长按时间为300ms，可以自己设置
        });

        document.querySelector('#' + id).addEventListener('touchmove', function (e) {
            // 长按过程中，手指是不能移动的，若移动则清除定时器，中断长按逻辑
            clearTimeout(timeOutEvent);
            /* e.preventDefault() --> 若阻止默认事件，则在长按元素上滑动时，页面是不滚动的，按需求设置吧 */
        });

        document.querySelector('#' + id).addEventListener('touchend', function (e) {
            // 若手指离开屏幕时，时间小于我们设置的长按时间，则为点击事件，清除定时器，结束长按逻辑
            clearTimeout(timeOutEvent);
        });
    }

    window.onload = function () {
        longpress('qrImCr',getQrImg());
    };
</script>














<script>
    // var swiper = new Swiper('.swiper-container', {
    //     slidesPerView: 1.3,
    //     centeredSlides: true,
    //     speed:800,
    //     loop: true,
    //     autoplay: {
    //         delay: 2500,
    //         disableOnInteraction: false,
    //     },
    // });
</script>

